<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    @confirm="onSubmit"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    width="60%"
  >
    <t-form
      labelAlign="right"
      labelWidth="130px"
      :data="formData"
      ref="form"
      @submit="onSubmit"
      :colon="true"
      :rules="rules"
    >
      <t-form-item label="单位名称" name="name">
        <t-tree-select
          style="width: 300px"
          :data="deptTree"
          :treeProps="{ keys: { value: 'id' } }"
          v-model="formData.name"
          filterable
          clearable
          @change="selectUnit"
          placeholder="请选择"
        />
      </t-form-item>
      <t-form-item label="机构性质" name="institutional">
        <t-select v-model="formData.institutional" :options="dict.type.institutional" placeholder="请选择机构性质" />
      </t-form-item>
      <t-form-item label="高新技术企业" name="hightechEnterprise">
        <t-switch
          size="large"
          v-model="formData.hightechEnterprise"
          :label="['是', '否']"
          :customValue="['1', '0']"
        ></t-switch>
      </t-form-item>
      <t-form-item label="科技型小企业" name="technologyEnterprise">
        <t-switch
          size="large"
          v-model="formData.technologyEnterprise"
          :label="['是', '否']"
          :customValue="['1', '0']"
        ></t-switch>
      </t-form-item>
      <t-form-item label="法人性质" name="legalNature">
        <t-select v-model="formData.legalNature" :options="dict.type.legal_nature" placeholder="请选择法人性质" />
      </t-form-item>
      <t-form-item label="统一社会信用代码" name="code">
        <t-input v-model="formData.code" placeholder="请输入统一社会信用代码"></t-input>
      </t-form-item>
      <t-form-item label="行政代码" name="adminCode">
        <t-input v-model="formData.adminCode" placeholder="请输入行政代码"></t-input>
      </t-form-item>
      <t-form-item label="通讯地址" name="address">
        <t-input v-model="formData.address" placeholder="请输入通讯地址"></t-input>
      </t-form-item>
      <t-form-item label="审批状态" name="approveStatus">
        <t-switch
          size="large"
          v-model="formData.approveStatus"
          :label="['提交', '暂存']"
          :customValue="['2', '1']"
        ></t-switch>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script>
import { treeselect, getDept } from '@/api/system/dept';

export const tabKey = 'unitInfo'
export const tableColumns = [
  { colKey: 'name', title: '单位名称' },
  { colKey: 'institutional', title: '机构性质' },
  { colKey: 'hightechEnterprise', title: '高新技术企业' },
  { colKey: 'technologyEnterprise', title: '科技型中小企业' },
  { colKey: 'legalNature', title: '法人性质' },
  { colKey: 'code', title: '统一社会信用代码' },
  { colKey: 'adminCode', title: '行政代码' },
  { colKey: 'address', title: '通信地址' },
  { colKey: 'createTime', title: '填表时间' },
  { colKey: 'approveStatus', title: '审批状态' },
  { colKey: 'op', title: '操作' },
]
export default {
  name: 'TabUnitBaseInfo',
  props: {
    infoId: {
      type: Number,
      required: true,
      default: -1,
    },
  },
  data() {
    return {
      // business data
      formData: {
        name: '',
        institutional: '',
        hightechEnterprise: '0',
        technologyEnterprise: '0',
        legalNature: '',
        code: '',
        adminCode: '',
        address: '',
        approveStatus: '1',
      },
      rules: {
        name: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
        institutional: [{ required: true, message: '机构性质不能为空', trigger: 'blur' }],
        legalNature: [{ required: true, message: '法人性质不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
        adminCode: [{ required: true, message: '行政代码不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '通讯地址不能为空', trigger: 'blur' }],
      },
      deptTree: [],
      deptInfo: {},
      // base data
      visible: true,
      header: '',
    };
  },
  dicts: ['institutional', 'legal_nature'],
  created() {
    if (this.infoId === -1) {
      this.header = '添加信息记录';
    } else {
      this.header = '修改信息内容';
      this.getDetail();
    }
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      treeselect()
        .then((res) => {
          this.deptTree = res.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    async onSubmit() {
      const res = await this.$refs.form.validate();
      if (res) {
        if (this.infoId === -1) {
          const { code } = await this.$api.kjtjdc.table[tabKey].add(this.formData);
          if (code === 200) {
            this.$message.success('添加信息成功');
          }
        } else {
          const { code } = await this.$api.kjtjdc.table[tabKey].edit(this.formData);
          if (code === 200) {
            this.$message.success('修改信息成功');
          }
        }
        this.$emit('update:visible', false);
        this.$emit('reload');
      } else {
        this.$message.warning('请完善信息');
      }
    },
    async selectUnit(uid) {
      const { data } = await getDept(uid);
      this.deptInfo = data;
      this.formData.code = data.postCode;
      this.formData.address = data.address;
    },
    async getDetail() {
      const { data } = await this.$api.kjtjdc.table[tabKey].getInfoById(this.infoId);
      data.name = Number(data.name);
      this.formData = data;
    },
    // base methods
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style lang="less" scoped></style>
